<style>
.bottem-button {
  margin: 20px 0;
}

.el-input {
  width: 300px;
  margin: 0 10px;
}

.tip {
  color: red;
}
</style>


<template>
  <div id="app">
    <h3>这是一个个人介绍页面</h3>
    <div>
      <p>前端工作三年</p>
      <p>2017.3-2018.9 卷皮网</p>
      <p>2018.9-2020.4 长佰网络</p>
      <p>主要开发 vue web 站前端后台管理系统，微信小程序原生和 uni-app</p>
    </div>
    <div class="tip">
      这是你刚刚vuex输入的值：{{text}}
    </div>
    <div class="bottem-button">
      <p>
        如果不想用 vuex 呢
      </p>
      <el-input
        v-model="input"
        placeholder="请输入内容"
        class="el-input"
      ></el-input>
      <el-button
        type="primary"
        @click="onVuex"
      >尝试 bus</el-button>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Bus from "@/utils/bus";

export default {
  computed: {
    ...mapState({
      text: state => state.text
    })
  },

  data() {
    return {
      input: ""
    };
  },

  methods: {
    onVuex() {
      let input = this.input;
      if (input === "") {
        this.$message({
          message: "输入一个值来尝试 bus",
          type: "warning"
        });
      } else {
        Bus.$emit("isBus", input);
        this.$router.push({
          path: "/showPage"
        });
      }
    }
  }
};
</script>




